<!--
 * @Author: cai
 * @Date: 2022-07-11 14:17:11
 * @LastEditors: cai
 * @LastEditTime: 2022-08-29 14:16:30
 * @Description:
 * @FilePath:
 * @Example: https://lbs.amap.com/api/javascript-api-v2/documentation#driving
 * https://lbs.amap.com/api/javascript-api-v2/getting-started
 * https://lbs.amap.com/demo/list/js-api-v2
-->

<template>
  <div class="home_div">
    <!-- <div id="container"></div> -->
    <slot :initAMap="initAMap" :map="map"></slot>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '465dae7ab7da9811cbb15fbbafc7c24d'
}
export default {
  name: 'AMap',
  data() {
    return {
      map: null
    }
  },
  props: {
    options: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },
  created() {},
  mounted() {
    this.initAMap()
      .then((AMap) => {
        this.map = new AMap.Map(this.$el, {
          viewMode: '3D',
          zoom: 11,
          features: ['bg', 'road', 'building', 'point'],
          center: [119.019161, 25.478085],
          zooms: [2, 21],
          ...this.options
        })
        this.map.on('complete', () => {
          this.$emit('AMapAction', AMap, this.map)
          // console.log('触发地图资源加载完成事件')
          // AMap.plugin(['AMap.Driving'], function () {
          //   //加载驾车服务插件
          //   var drivingOptions = {
          //     //驾车策略，包括 LEAST_TIME，LEAST_FEE, LEAST_DISTANCE,REAL_TRAFFIC
          //     policy: AMap.DrivingPolicy.LEAST_TIME,
          //   }
          //   var driving = new AMap.Driving(drivingOptions)
          //   console.log(driving)
          //   //根据起终点坐标规划驾车路线
          //   driving.search(
          //     new AMap.LngLat(119.019161, 25.478085),
          //     new AMap.LngLat(119.007662, 25.454202),
          //     (status, result) => {
          //       console.log(status, result)
          //       // result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          //       if (status === 'complete') {
          //         if (result.routes && result.routes.length) {
          //           // 绘制第一条路线，也可以按需求绘制其它几条路线
          //           //drawRoute(this.map, result.routes[0]);
          //           var route = result.routes[0]
          //           var path = []
          //           for (var i = 0, l = route.steps.length; i < l; i++) {
          //             var step = route.steps[i]
          //             for (var j = 0, n = step.path.length; j < n; j++) {
          //               path.push(step.path[j])
          //             }
          //           }
          //           var startMarker = new AMap.Marker({
          //             position: path[0],
          //             icon: '/static/img/start.png',
          //             map: this.map,
          //           })
          //           var endMarker = new AMap.Marker({
          //             position: path[path.length - 1],
          //             icon: '/static/img/end.png',
          //             map: this.map,
          //           })
          //           var routeLine = new AMap.Polyline({
          //             path: path,
          //             isOutline: true,
          //             outlineColor: '#ffeeee',
          //             borderWeight: 2,
          //             strokeWeight: 5,
          //             strokeOpacity: 0.9,
          //             strokeColor: '#0091ff',
          //             lineJoin: 'round',
          //           })
          //           // map.add(routeLine);
          //           this.map.add([startMarker, endMarker, routeLine])
          //           this.map.setFitView()
          //           console.log('绘制驾车路线完成')
          //         }
          //       } else {
          //         console.log('获取驾车数据失败：' + result)
          //       }
          //     }
          //   )
          // })
        })
      })
      .catch((e) => {
        console.log(e)
      })
  },
  methods: {
    initAMap() {
      return new Promise((resolve, reject) => {
        AMapLoader.load({
          key: '42a73bf3c75b589e60e225502232a5d4', // 设置您的key
          // version: '1.4.20',
          version: '2.0',
          plugins: [],
          AMapUI: {
            version: '1.1',
            plugins: []
          }
        })
          .then((AMap) => {
            resolve(AMap)
          })
          .catch((err) => {
            reject(err)
          })
      })
    }
  }
}
</script>
<style scoped>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>
